<template>
    <div class="shoppingAndCartItem-wrap">
        <div class="img">
            <img src="@/assets/banner.jpg" alt="">
        </div>
        <div class="title">
            我是一个很白很白的毛巾
        </div>
        <div class="info">
            我是描述
        </div>
        <div class="price">
            ￥150
        </div>
        <div class="num">
            10
        </div>
        <div class="total-price">
            ￥1500
        </div>
    </div>
  </template>
  
  <script>

  export default {
    name: 'shoppingAndCartItem',
    components: {
      
    },
    props:[],
    methods:{
        
    },
    data(){
        return {
            value:3
        }
    }
  }
  </script>
  
  <style scoped lang="less">
    .shoppingAndCartItem-wrap{
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding: 16px;
        border-radius: 16px;
        background: whitesmoke;
        .img{
            width: 60px;
            height: 60px;
            border-radius: 10px;
            overflow: hidden;
            margin-right: 10px;
        }
        .title{
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .info{
            width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 10px;
        }
        .price{
            color: orange;
            width: 50px;
        }
        .num{
            width: 50px;
            margin: 0 10px;
        }
        .total-price{
            color: red;
            width: 50px;
        }
    }
  </style>
  